<template>
	<view class="payment-success-page">
		<!-- 导航栏 -->
		<uni-nav-bar 
			:fixed="true" 
			:status-bar="true" 
			title="订单支付" 
			left-icon="left" 
			background-color="#007AFF"
			color="#ffffff"
			:border="false"
			:shadow="false"
			@clickLeft="goBack">
		</uni-nav-bar>

		<!-- 导航栏下容器 -->
		<view class="nav-container"></view>

		<!-- 主要内容区域 -->
		<view class="content">
			<view class="success-card">
				<!-- 成功图标 -->
				<view class="success-icon-wrapper">
					<view class="success-icon-circle">
						<uni-icons type="checkmarkempty" size="50" color="#ffffff"></uni-icons>
					</view>
				</view>

				<!-- 支付成功文字 -->
				<view class="success-text">支付成功</view>

				<!-- 金额 -->
				<view class="amount">39.90</view>

				<!-- 预约编号 -->
				<view class="reservation-number">预约编号: 324252536363634</view>

				<!-- 按钮区域 -->
				<view class="button-group">
					<view class="btn btn-primary" @click="goHome">返回首页</view>
					<view class="btn btn-secondary" @click="viewOrderDetail">订单详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const goBack = () => {
		uni.navigateBack()
	}

	const goHome = () => {
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}

	const viewOrderDetail = () => {
		// 跳转到订单详情页面
		uni.navigateTo({
			url: '/pages/confirm-order/order-detail'
		})
	}
</script>

<style lang="scss" scoped>
	.payment-success-page {
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	.nav-container {
		height: 200px;
		background-color: #007AFF;
		width: 100%;
	}

	.content {
		padding: 0 10px;
		margin-top: -240px;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: calc(100vh - 100px);
	}

	.success-card {
		width: 100%;
		max-width: 600px;
		background-color: #ffffff;
		border-radius: 20px;
		padding: 40px 30px 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	}

	.success-icon-wrapper {
		margin-bottom: 20px;
	}

	.success-icon-circle {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background-color: #007AFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.success-text {
		font-size: 16px;
		color: #333333;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.amount {
		font-size: 32px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 25px;
		line-height: 1;
	}

	.reservation-number {
		font-size: 13px;
		color: #000000;
		margin-bottom: 40px;
		font-weight: bold;
	}

	.button-group {
		width: 100%;
		display: flex;
		margin-bottom: 20px;
		flex-direction: column;
		gap: 12px;
	}

	.btn {
		width: 100%;
		height: 44px;
		border-radius: 22px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 15px;
		font-weight: 500;
		cursor: pointer;
		transition: opacity 0.3s;
	}

	.btn:active {
		opacity: 0.8;
	}

	.btn-primary {
		background-color: #007AFF;
		color: #ffffff;
	}

	.btn-secondary {
		background-color: #D0D0D0;
		color: #ffffff;
	}
</style>

<style lang="scss">
	/* 全局样式，用于覆盖组件内部样式 */
	.uni-navbar__content {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar--border {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar__header {
		border-bottom: none !important;
		border: none !important;
	}
</style>

